<template>
    <div>
        <a-form auto-label-width size="mini">
            <a-form-item :label="customTranslate('Task Listener')">
                <a-badge :count="executionListener?.length || 0">
                    <a-button @click="openDialog">{{customTranslate('Setting')}}</a-button>
                </a-badge>
            </a-form-item>
        </a-form>

        <a-modal v-model:visible="visible" width="50%">
            <a-button type="primary" @click="onAdd">+</a-button>
            <a-table :data="executionListener">
                <template #columns>
                    <a-table-column :title="customTranslate('Event Type')" data-index="event">
                        <template #cell="{ record }">
                            <a-select v-model="record.event">
                                <a-option value="create">{{customTranslate('Create')}}</a-option>
                                <a-option value="assignment">{{customTranslate('Assignment')}}</a-option>
                                <a-option value="complete">{{customTranslate('Complete')}}</a-option>
                                <a-option value="delete">{{customTranslate('Delete')}}</a-option>
                                <a-option value="update">{{customTranslate('Update')}}</a-option>
                                <a-option value="timeout">{{customTranslate('Timeout')}}</a-option>
                            </a-select>
                        </template>
                    </a-table-column>
                    <a-table-column :title="customTranslate('Listener ID')" data-index="type">
                        <template #cell="{ record }">
                            <a-select v-model="record.type">
                                <a-option value="class">{{customTranslate('Java Class')}}</a-option>
                                <a-option value="expression">{{customTranslate('Expression')}}</a-option>
                                <a-option value="delegateExpression">{{customTranslate('Delegate Expression')}}</a-option>
                            </a-select>
                        </template>
                    </a-table-column>
                    <a-table-column :title="customTranslate('Value')" data-index="value">
                        <template #cell="{ record }">
                            <a-input v-model="record.value"></a-input>
                        </template>
                    </a-table-column>
                    <a-table-column :title="customTranslate('Field Injection')" data-index="params">
                        <template #cell="{ record}">
                            <a-badge :count="record?.params?.length || 0">
                                <a-button @click="onParamsEdit(record)">{{customTranslate('Setting')}}</a-button>
                            </a-badge>
                        </template>
                    </a-table-column>
                    <a-table-column :title="customTranslate('Operation')">
                        <template #cell="{ record ,rowIndex}">
                            <a-button @click="doDeleteListener(record, rowIndex)">{{customTranslate('Delete')}}</a-button>
                        </template>
                    </a-table-column>
                </template>
            </a-table>
            <template #footer>
                <a-space>
                    <a-button type="primary" @click="onClose">{{customTranslate('Ok')}}</a-button>
                </a-space>
            </template>
        </a-modal>

        <a-modal v-model:visible="paramsVisible" width="50%">
            <a-button type="primary" @click="onAddParam">+</a-button>
            <a-table :data="params">
                <template #columns>
                    <a-table-column :title="customTranslate('Name')" data-index="name">
                        <template #cell="{ record }">
                            <a-input v-model="record.name"></a-input>
                        </template>
                    </a-table-column>
                    <a-table-column :title="customTranslate('Type')" data-index="type">
                        <template #cell="{ record }">
                            <a-select v-model="record.type">
                                <a-option value="stringValue">{{customTranslate('String')}}</a-option>
                                <a-option value="expression">{{customTranslate('Expression')}}</a-option>
                            </a-select>
                        </template>
                    </a-table-column>
                    <a-table-column :title="customTranslate('Value')" data-index="value">
                        <template #cell="{ record }">
                            <a-input v-model="record.value"></a-input>
                        </template>
                    </a-table-column>
                    <a-table-column :title="customTranslate('Operation')">
                        <template #cell="{ rowIndex}">
                            <a-button @click="onDeleteParam(rowIndex)">{{customTranslate('Delete')}}</a-button>
                        </template>
                    </a-table-column>
                </template>
            </a-table>
            <template #footer>
                <a-space>
                    <a-button type="primary" @click="onSaveParam">{{customTranslate('Ok')}}</a-button>
                </a-space>
            </template>
        </a-modal>
    </div>
</template>

<script>
import { inject, toRaw } from 'vue';
import customTranslate from "../../translate/customTranslate";

export default {
    props: ["element"],
    data() {
        return {
            visible: false,
            paramsVisible: false,
            executionListener: [],
            params: [],
            currentRow: {}
        };
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        return {
            bpmnModeler,
            customTranslate
        };
    },
    mounted() {

        const _element = toRaw(this.element)
        console.log(_element)

        this.executionListener = _element?.businessObject?.extensionElements?.values.filter(ex => {
            return ex.$type === 'flowable:TaskListener'
        }).map(it => {
            let type = '';
            if ('class' in it) type = 'class'
            if ('expression' in it) type = 'expression'
            if ('delegateExpression' in it) type = 'delegateExpression'
            return {
                event: it.event,
                type,
                value: it[type],
                params: it.fields?.map(f => {
                    let fieldType = ''
                    if ('stringValue' in f) fieldType = 'stringValue'
                    if ('expression' in f) fieldType = 'expression'
                    return {
                        name: f.name,
                        type: fieldType,
                        value: f[fieldType]
                    }
                }) || []
            }
        }) || [];
    },
    watch: {
    },
    methods: {
        openDialog() {
            this.visible = true;
        },
        onClose() {
            if (this.executionListener?.length) {
                let extensionElements = this.element.businessObject.get('extensionElements')
                if (!extensionElements) {
                    extensionElements = this.bpmnModeler.get('moddle').create('bpmn:ExtensionElements')
                }
                // 清除旧值
                extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') || []
                this.executionListener.forEach(item => {
                    const executionListener = this.bpmnModeler.get('moddle').create('flowable:TaskListener')
                    executionListener['event'] = item.event
                    executionListener[item.type] = item.value
                    if (item.params && item.params.length) {
                        item.params.forEach(field => {
                            const fieldElement = this.bpmnModeler.get('moddle').create('flowable:Field')
                            fieldElement['name'] = field.name
                            fieldElement[field.type] = field.value
                            executionListener.get('fields').push(fieldElement)
                        })
                    }
                    extensionElements.get('values').push(executionListener)
                })
                this.updateProperties({ extensionElements: extensionElements })
            } else {
                const extensionElements = this.element.businessObject[`extensionElements`]
                if (extensionElements) {
                    extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') || []
                }
            }

            this.visible = false
        },
        updateProperties(data) {
            const modeling = toRaw(this.bpmnModeler.get("modeling"));
            modeling.updateProperties(toRaw(this.element), data);
        },
        onAdd() {
            this.executionListener.push({
                event: 'create',
                value: '',
                type: 'class'
            })
        },
        doDeleteListener(row, index) {
            console.log(index);
            console.log(toRaw(row));
            this.executionListener.splice(index, 1)
        },
        onParamsEdit(row) {
            console.log(row)
            this.currentRow = row;
            this.params = row.params || [];
            this.paramsVisible = true;
        },
        onAddParam() {
            this.params.push({
                name: '',
                type: 'stringValue',
                value: ''
            })
        },
        onDeleteParam(index) {
            this.params.splice(index, 1)
        },
        onSaveParam() {
            this.currentRow.params = this.params;
            this.paramsVisible = false;
        }
    }
};
</script>

<style lang="scss" scoped>

</style>